<template>
	<view class="classifyLayOut">
		<searchStatusBar>
			<template #default>分类</template>
		</searchStatusBar>
		<view class="classify">
			<singleTopic v-for="item of topicData" :key="item._id" :imgData="item"></singleTopic>
		</view>
	</view>
</template>

<script setup>
	import singleTopic from '../../components/singleTopic.vue'

	import searchStatusBar from '../../components/searchStatusBar.vue'

	import {
		getFeaturedTopicsApi
	} from '../../Api/topic/topic.js'

	import {
		ref
	} from 'vue'

	//定义topicData数据
	const topicData = ref([])

	//获取topicData数据
	async function getTopic() {
		const res = await getFeaturedTopicsApi()
		topicData.value = res.data
	}
	getTopic()
</script>

<style lang="scss" scoped>
	.classifyLayOut {
		width: 750rpx;
		padding: 0 0rpx;
		padding-bottom: 200rpx;
		background-image:
			linear-gradient(to bottom, transparent, #fff 380rpx),
			linear-gradient(to right, #bfedd6, #f5e3d9);

		.classify {
			// background-color: black;
			padding: 5rpx 25rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns: repeat(3, 1fr);
		}
	}
</style>